import React from 'react';
import { routerShape, locationShape } from 'react-router';
import { inject, observer } from 'mobx-react';
import { WeaTab } from 'ecCom';

import * as SETTING_APIS from '../apis/setting/setting';
import '../style/setting.less';

@inject('emailSettingStore')
@observer
class Setting extends React.Component {
  static contextTypes = {
    router: routerShape,
    location: locationShape,
  };

  componentDidMount() {
    const { emailSettingStore, location } = this.props;
    const { viewcondition } = emailSettingStore;
    const { router } = this.context;

    // 若是由用户手动切换至邮件设置的某子路由的情况下，用该变量取得那个子路由字符串
    let curRoute = location.pathname
      .replace(/main\/email\/setting\/|main\/email\/setting/, '')
      .replace(/\?_key=(.+)$/, '');

    // 在进入到setting页面或者是setting页面的子路由后，
    // 1.首先从后台获取到tab信息用于设置tabs
    // 2.然后若store中的viewcondition为空字符串并且curRoute也为空字符串，则默认进入第一个tab相关的子路由组件进行显示，
    // 3.curRoute的值优先于store中的viewcondition，所以若curRoute不为空字符串，则store中的viewcondition更新为curRoute，用curRoute来渲染路由组件
    //   仅当curRoute为空字符串时，才会采用store中的viewcondition渲染路由组件
    // 无论是上述哪种情况，都要更新vc
    emailSettingStore.setStoreAttr({
      interfaceOfGetVal: SETTING_APIS.getMailSetTabs,
      interfaceBehavior: 'getTopTabs',
      attr: 'topTabs',
      callback: (val) => {
        // emailSettingStore.setStoreAttr({attr: 'viewcondition', val: nextVC === '' ? val[0].viewcondition: nextVC})
        // router.push(`/main/email/setting/${nextVC === '' ? val[0].viewcondition: nextVC}`);

        if (viewcondition === '' && curRoute === '') {
          emailSettingStore.setStoreAttr({
            attr: 'viewcondition',
            val: val[0].viewcondition,
          });
        } else if (curRoute !== '') {
          emailSettingStore.setStoreAttr({
            attr: 'viewcondition',
            val: curRoute,
          });
        }

        router.push(`/main/email/setting/${emailSettingStore.viewcondition}`);
      },
    });
  }

  componentWillReceiveProps(nextProps) {
    const { emailSettingStore } = this.props;
    const { viewcondition } = emailSettingStore;
    const { router } = this.context;
    // 若是由用户手动切换至邮件设置的某子路由的情况下，用该变量取得那个子路由字符串
    let curRoute = nextProps.location.pathname
      .replace(/main\/email\/setting\/|main\/email\/setting/, '')
      .replace(/\?_key=(.+)$/, '');

    if (nextProps.location.pathname === this.props.location.pathname) {
    } else {
      if (viewcondition === '' && curRoute === '') {
        emailSettingStore.setStoreAttr({
          attr: 'viewcondition',
          val: val[0].viewcondition,
        });
      } else if (curRoute !== '') {
        emailSettingStore.setStoreAttr({
          attr: 'viewcondition',
          val: curRoute,
        });
      }
      router.push(`/main/email/setting/${emailSettingStore.viewcondition}`);
    }
  }

  onTabChange = (key) => {
    const { emailSettingStore } = this.props;
    const { router } = this.context;
    const { setStoreAttr } = emailSettingStore;
    setStoreAttr({
      attr: 'viewcondition',
      val: key,
    });
    router.push(`/main/email/setting/${key}`);
  };

  render() {
    const { emailSettingStore } = this.props;
    const { viewcondition, topTabs } = emailSettingStore;
    return (
      <div
        style={{ height: '100%', position: 'relative', overflowY: 'auto' }}
        className={'email-setting-wrapper'}
      >
        <WeaTab
          ecId={`${
            (this && this.props && this.props.ecId) || ''
          }_WeaTab@v85r2u`}
          datas={topTabs}
          keyParam="viewcondition"
          countParam="groupid"
          selectedKey={viewcondition}
          type={'card'}
          onChange={this.onTabChange}
        />
        {this.props.children}
      </div>
    );
  }
}
export default Setting;
